<template>
  <div class="box">
    <p-modal
      title="Title"
      :visible="visible"
      :confirm-loading="confirmLoading"
      width = "78%"
      @ok="handleOk"
      @cancel="handleCancel"
    >

    <RenderTable 
      :queryParamArr = "queryParamArr"
      :defColumns="defColumns"
      :url = "url"
      :isShowRowSelection = 'true'
      :isShowToolBar = false
      @onSelectChange = 'onSelectChange'      
      @handleEdit = "handleEdit"
      ref='renderTable'
    >


    </RenderTable>
  </p-modal>

  </div>
</template>

<script type="text/javascript">
import RenderTable from '@/components/renderTable'
import { timestampToDatetime } from "@/utils/util";


export default {
  data() {
    return {
      visible: false,

      queryParamArr: [
        {
          label: "班组",
          placeholder: "请输入班组",
          type: 'input',
          key: 'classname',
          value: ''
        },
        {
          label: "员工编号",
          placeholder: "请输入员工编号",
          type: 'input',
          key: 'empno',
          value: ''
        },
        {
          label: "员工姓名",
          placeholder: "请输入员工姓名",
          type: 'input',
          key: 'empname',
          value: ''
        },
      ],
      defColumns: [
        {
          title: "序号",
          dataIndex: "",
          key: "rowIndex",
          width: 60,
          align: "center",
          customRender: (t, r, index) => {
            return parseInt(index) + 1;
          },
        },

        {
          title: "班组",
          align: "center",
          dataIndex: "classname",
        },
        {
          title: "员工编号",
          align: "center",
          dataIndex: "empno",
        },
        {
          title: "员工姓名",
          align: "center",
          dataIndex: "empname",        
        },
        {
          title: "性别",
          align: "center",
          dataIndex: "empsex",  
        },
        {
          title: "技能",
          align: "center",
          dataIndex: "skills",  
        },
        {
          title: "雇佣性质",
          align: "center",
          dataIndex: "employNature",  
        },
        {
          title: "入职时间",
          align: "center",
          dataIndex: "registerdt",  
         customRender: (t, r, index) => {
            return timestampToDatetime(t);
          },          
        },
        {
          title: "请假类型",
          align: "center",
          dataIndex: "gateStatus",  
        },
        {
          title: "起始时间",
          align: "center",
          dataIndex: "remark",  
        },
        {
          title: "终止时间",
          align: "center",
          dataIndex: "remark",  
        },
        {
          title: "日期",
          align: "center",
          dataIndex: "date",
          customRender: (t, r, index) => {
            return timestampToDatetime(t);
          },
        },        

      ],
      url: {
        list: '/mes-manpower/mesHrEmployeeinfo/list',
      },
      selectionRows: '',
      layout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
      },         
    }
  },
  mounted() {
  }, 
  methods: {


    handleEdit(record){
      this.$refs.lineSkillModal.showModal(record)
    },

    showModal(){
      this.visible = true
      this.$refs.renderTable.loadData(1)
    },

    // 选择table
    onSelectChange(selectionRows){
      this.selectionRows = selectionRows
    },


    handleOk(e) {
      this.visible = false
      this.$emit('handleSuccess', this.selectionRows)
    },
    handleCancel(e) {
      this.visible = false
      
      this.$refs.renderTable.onClearSelected()
      console.log(this.data);
      console.log(this.$options.data());
      
      Object.assign(this.$data, this.$options.data())

    },

  },
  components: {
    RenderTable,
  }
}
</script>

<style lang="less" scoped>
</style>

